import {NDataTable,DataTableProps,NDrawer,NDrawerContent,NButton,NCard,NSpace} from "naive-ui";
import {Component, ComponentProps, Hook, Mut, VueComponent} from "vue3-oop";
import styles from './index.module.scss';

interface IProps {
  nDataTableProps:DataTableProps,
  maxWidth: number,
  maxHeight: number,
  keyColumn: string,
  toolbar: any,
  onRowClick: (row:any)=>void,
  onRowDbClick: (row:any)=>void,
  sformSearch: ()=>void,
}
@Component()
export default class DynaTablePanel extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> =
    ['nDataTableProps','maxWidth','maxHeight','keyColumn','toolbar','onRowClick','onRowDbClick','sformSearch']

  @Mut() showSForm = false;

  constructor(
  ) {
    super();
    this.props.maxWidth = 300;
    this.props.maxHeight = 200;
    this.props.keyColumn = 'id';
    this.props.toolbar = {visible:false,left:[],middle:[],right:[]}
  }

  toggleSForm=()=>{
    this.showSForm = !this.showSForm;
  }

  @Hook('Mounted')
  onMounted(){

  }

  @Hook('Unmounted')
  onUnmounted(){

  }

  render() {

    const cardPadding = 10,toolbarHeight = this.props.toolbar.visible?44:0;
    const tableHeight = this.props.maxHeight - 2*cardPadding - toolbarHeight;

    return (
      <NCard
        class={styles['dyna-table-panel']}
        header-style={{padding:`${cardPadding}px`}}
        content-style={{padding:`${cardPadding}px`}}
      >
        {!this.props.toolbar.visible?null:(
          <div {...{style:{display:"flex",justifyContent:"space-between",marginBottom:"10px"}}}>
            <div><NSpace size="small">{this.props.toolbar.left}</NSpace></div>
            <div><NSpace size="small">{this.props.toolbar.middle}</NSpace></div>
            <div><NSpace size="small">{this.props.toolbar.right}</NSpace></div>
          </div>
        )}
        <NDataTable
          remote
          striped

          {...this.props.nDataTableProps}
          rowKey={row=>row[this.props.keyColumn]}

          rowProps={(row:any)=>{
            return {
              onClick:(e:MouseEvent)=>{
                e.stopPropagation();
                this.props.onRowClick(row);
              },
              onDblclick:(e:MouseEvent)=>{
                e.stopPropagation();
                this.props.onRowDbClick(row);
              }
            }
          }}
          {...{style:{
            // height:`${tableHeight}px`,
              overflow:'hidden'},id:'StdTable'}}
        />
        <NDrawer
          to={'#StdTable'}
          placement={'top'}
          trap-focus={true}
          on-mask-click={this.toggleSForm}
          show={this.showSForm}
          height={300}
        >
          <NDrawerContent>
            {{
              default:()=>(<NCard>测试</NCard>),
              footer:()=>(
                <NSpace size={'small'}>
                  <NButton type={'primary'} onClick={this.props.sformSearch}>搜索</NButton>
                  <NButton onClick={this.toggleSForm}>取消</NButton>
                </NSpace>
              )
            }}
          </NDrawerContent>
        </NDrawer>
      </NCard>
    )
  }
}

